<template>
    <div>
        <li>
            <div v-if="data.id>0" @click="changepid(data.id)" :class="pid==data.id?'active':''" :id='data.id'>
                {{data.name}}
            </div>
            <ul v-if="data.son && data.son.length>0">
                <reply v-for="son in data.son" :data='son' :key='son.id'/>
            </ul>
        </li>

    </div>
</template>

<script>
import bus from './bus.js'
    export default {
        name:'reply',
        props:['data'],
        data(){
            return{
                pid:0,
            }
        },
        methods:{
            changepid(pid){
                this.pid=pid
                localStorage.setItem('pid',pid)
                //使用bus监听
                bus.$emit('pid',pid)
                //样式把active全删除，把当前的加上样式
                let activelist=document.getElementsByClassName('active')
                for(var i=0;i<activelist.length;i++){
                    activelist[i].classList.remove('active')
                }
                //获取当前元素加上样式
                let pre = document.getElementById(pid)
                pre.classList.add('active')
            }
        },

    }
</script>

<style scoped>
ul{
    padding-left:5rem;
}
.active{
    background-color: aquamarine;
}

</style>